<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> 
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!-- header -->
<jsp:include page="../include/header.jsp"></jsp:include>
<header id="header">

	<!--/header-middle-->
	<jsp:include page="../include/header_middle.jsp"></jsp:include>

	<!--header-bottom-->
	<jsp:include page="../include/header_bottom.jsp"></jsp:include>
	<!--/header-bottom-->

</header>
<!--/header-->

<section>
	<div class="container">
		<div class="row">
			<div class="col-sm-2">
				
			</div>

			<div class="col-sm-9 padding-right">
				<!--각자 삽입할 부분-->
				<form id="f" name="f" method="post">
					<!-- 물품 정보 테이블 -->
					<div class="row">
						<div id="p_list" class="col-md-12">
							<table class="table table-bordered">
								<tr>
									<td align="center" width="15%" bgcolor="#fe980f" style="font-weight: bold; color: white;">이미지</td>
									<td align="center" width="40%" bgcolor="#fe980f" style="font-weight: bold; color: white;">제품명</td>
									<td align="center" width="10%" bgcolor="#fe980f" style="font-weight: bold; color: white;">수량</td>
									<td align="center" width="10%" bgcolor="#fe980f" style="font-weight: bold; color: white;">가격</td>
									<td align="center" width="15%" bgcolor="#fe980f" style="font-weight: bold; color: white;">총 금액</td>
									<td align="center" width="10%" bgcolor="#fe980f" style="font-weight: bold; color: white;">적립금</td>
								</tr>
								
								<c:forEach items="${ productList }" var="product">
									<tr>
										<td align="center"><img src="/ecom/resources/images/product/${ product.product_image0 }" width="50%"/></td>
										<td align="center" style="padding-top:20px">${ product.product_name }</td>
										<c:forEach items="${ cartList }" var="cart">
											<c:if test="${ product.product_no == cart.cart_product }">
												<td align="center" style="padding-top:20px">${ cart.cart_count }</td>
												<td align="center" style="padding-top:20px">${ product.product_price }</td>
												<td align="center" style="padding-top:20px"><fmt:formatNumber value="${product.product_price * cart.cart_count}" pattern=",###"/>원</td>
												<td align="center" style="padding-top:20px"><fmt:formatNumber value="${(product.product_price * cart.cart_count) / 20}" pattern=",###"/>원</td>
											</c:if>
										</c:forEach>
										</tr>
								</c:forEach>
								
							</table>
						</div>
					</div>

					<!-- 결제 금액 정보 테이블 (총 금액, 포인트 등) -->
					<div class="row">
						<div class="col-md-4"></div>
						<div class="col-md-8" id="i_list">
							<input type="hidden" name="price" value="${ totalPrice }"/>
							<table class="table table-bordered">
							<tr align="center">
							<td width="20%" bgcolor="#fe980f" style="font-weight: bold; color: white;">물품 수량</td>
							<td width="50%" bgcolor="#fe980f" style="font-weight: bold; color: white;">총 결제 금액</td>
							<td width="30%" bgcolor="#fe980f" style="font-weight: bold; color: white;">적립금</td>
							</tr>
							<tr align="center">
							<td>${ count }개</td>
							<td><fmt:formatNumber value="${ totalPrice }" pattern=",###"/>원</td>
							<td><fmt:formatNumber value="${ totalPrice / 20 }" pattern=",###"/>원</td>
							</tr>
							</table>
						</div>
					</div>
					
					<br/>
					<br/>
					<br/>

					<!-- 주문자, 수취인 정보 -->
					<div class="row">
						<!-- 주문자 정보 -->
						<div class="col-md-12">
						<table class="table table-bordered">
							<tr align="center">
								<td colspan="4" bgcolor="#fe980f"><h5 style="font-weight: bold; color: white;">주문자 정보</h5></td>
							</tr>
							<tr align="center">
								<td width="15%">이름</td>
								<td width="35%">
									${ member.member_name }
									<input type="hidden" name="o_name" value="${ member.member_name }"/>
								</td>
								<td width="15%">e-mail</td>
								<td width="35%">
									${ member.member_email }
									<input type="hidden" name="o_mail" value="${ member.member_email }"/>
								</td>
							</tr>
							<tr align="center">
								<td width="15%">전화 번호</td>
								<td width="35%">
									${ member.member_phone }
									<input type="hidden" name="o_tel" value="${ member.member_phone }"/>
								</td>
								<td width="15%" colspan="2"></td>
							</tr>
							<tr align="center">
								<td width="15%">우편번호</td>
								<td width="35%">
									${ member.member_zip }
									<input type="hidden" name="o_zip" value="${ member.member_zip }"/>
								</td>
								<td width="15%">기본주소</td>
								<td width="35%">
									${ member.member_addr1 }
									<input type="hidden" name="o_addr1" value="${ member.member_addr1 }"/>
								</td>
							</tr>
							<tr align="center">
								<td width="15%">상세주소</td>
								<td width="70%" colspan="3">
									${ member.member_addr2 }
									<input type="hidden" name="o_addr2" value="${ member.member_addr2 }"/>
								</td>
							</tr>
						</table>
						</div>
					</div>

					<br /> <br />

					<div class="row">
						<input type="checkbox" id="sameChk" onclick="copyLocation()"> 주문자 정보와 동일
					</div>

					<!-- 수취인 정보 -->
					<div class="row">
						<div class="col-md-12">
						<table class="table table-bordered">
							<tr align="center">
								<td colspan="4" bgcolor="#fe980f"><h5 style="font-weight: bold; color: white;">수취인 정보</h5></td>
							</tr>
							<tr align="center">
								<td width="15%">이름</td>
								<td width="35%"><input type="text" name="r_name"
									class="col-lg-12" id="r_name" /></td>
								<td width="15%">e-mail</td>
								<td width="35%"><input type="email" name="r_mail"
									class="col-lg-12" id="r_email" /></td>
							</tr>
							<tr align="center">
								<td width="15%" style="padding-top: 15px">전화 번호</td>
								<td width="35%" style="padding-top: 15px"><input type="tel" name="r_tel1"
									class="col-lg-3" id="r_tel1" /> <span class="col-lg-1">-</span>
									<input type="tel" name="r_tel2" class="col-lg-3" id="r_tel2" />
									<span class="col-lg-1">-</span> <input type="tel" name="r_tel3"
									class="col-lg-3" id="r_tel3" /></td>
								<td width="15%" style="padding-top: 15px">결제방식</td>
								<td width="35%">
									<select class="form-control" name="payments">
										<option>신용카드</option>
										<option>계좌이체</option>
										<option>무통장입금</option>
									</select>
								</td>
							</tr>
							<tr align="center">
								<td width="15%">우편번호</td>
								<td width="35%"><input type="text" name="zipcode1"
									class="col-lg-5" id="zipcode1" onclick="zipCodeOpen()" readonly="readonly"/> <span class="col-lg-2">-</span>
									<input type="text" name="zipcode2" class="col-lg-5" id="zipcode2" onclick="zipCodeOpen()" readonly="readonly"/>
								</td>
								<td width="15%">기본주소</td>
								<td width="35%"><input type="text" name="addr1"
									class="col-lg-12" id="addr1" onclick="zipCodeOpen()" readonly="readonly"/></td>
							</tr>
							<tr align="center">
								<td width="15%">상세주소</td>
								<td width="70%" colspan="3"><input type="text"
									name="r_addr2" class="col-lg-12" id="r_addr2" /></td>
							</tr>
							<tr align="center">
								<td width="15%">전달사항</td>
								<td width="85%" colspan="3"><input type="text"
									name="r_memo" class="col-lg-12" id="r_memo" /></td>
							</tr>
						</table>
						</div>
					</div>

					<div class="row" align="center">
						<button type="button" class="btn btn-primary btn-lg" onclick="order()">결제하기</button>
					</div>
					<br /> <br /> <br /> <br /> <br />
				</form>
			</div>
			<!--삽입 끝 -->
		</div>
	</div>
</section>

<footer id="footer">
	<div class="footer-top">
		<div class="container">
			<div class="row">
				<div class="col-sm-2">
					<div class="companyinfo">
						<h2>
							<span>e</span>-com
						</h2>
						<p>힘들어도 행복한 모습과 화목한 우리를 떠올려보자.</p>
					</div>
				</div>
				<div class="col-sm-7">
					<div class="col-sm-3">
						<div class="video-gallery text-center">
							<a href="#">
								<div class="iframe-img">
									<img src="${pageContext.request.contextPath}/resources/images/home/iframe1.png" alt="" />
								</div>
								<div class="overlay-icon">
									<i class="fa fa-play-circle-o"></i>
								</div>
							</a>
							<p>방명록</p>
							<h2>24 DEC 2014</h2>
						</div>
					</div>

					<div class="col-sm-3">
						<div class="video-gallery text-center">
							<a href="#">
								<div class="iframe-img">
									<img src="${pageContext.request.contextPath}/resources/images/home/iframe2.png" alt="" />
								</div>
								<div class="overlay-icon">
									<i class="fa fa-play-circle-o"></i>
								</div>
							</a>
							<p>방명록</p>
							<h2>24 DEC 2014</h2>
						</div>
					</div>

					<div class="col-sm-3">
						<div class="video-gallery text-center">
							<a href="#">
								<div class="iframe-img">
									<img src="${pageContext.request.contextPath}/resources/images/home/iframe3.png" alt="" />
								</div>
								<div class="overlay-icon">
									<i class="fa fa-play-circle-o"></i>
								</div>
							</a>
							<p>방명록</p>
							<h2>24 DEC 2014</h2>
						</div>
					</div>

					<div class="col-sm-3">
						<div class="video-gallery text-center">
							<a href="#">
								<div class="iframe-img">
									<img src="${pageContext.request.contextPath}/resources/images/home/iframe4.png" alt="" />
								</div>
								<div class="overlay-icon">
									<i class="fa fa-play-circle-o"></i>
								</div>
							</a>
							<p>방명록</p>
							<h2>24 DEC 2014</h2>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="address">
						<img src="${pageContext.request.contextPath}/resources/images/home/map.png" alt="" />
						<p>전 세계로 뻗어 나가는 E-COM</p>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="footer-bottom">
		<div class="container">
			<div class="row">
				<p class="pull-left">Copyright © 2013 E-COM Inc. All rights
					reserved.</p>
				<p class="pull-right">
					Designed by <span><a target="_blank"
						href="#">E-COM</a></span>
				</p>
			</div>
		</div>
	</div>

	</footer>
	
	
    <script src="${pageContext.request.contextPath}/resources/js/jquery.js"></script>
	<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath}/resources/js/jquery.scrollUp.min.js"></script>
	<script src="${pageContext.request.contextPath}/resources/js/price-range.js"></script>
    <script src="${pageContext.request.contextPath}/resources/js/jquery.prettyPhoto.js"></script>
    <script src="${pageContext.request.contextPath}/resources/js/main.js"></script>
    
     <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/jquery.js"></script>
	<script src="${pageContext.request.contextPath}/resources/assets/js/google-code-prettify/prettify.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/application.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-transition.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-modal.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-scrollspy.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-alert.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-dropdown.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-tab.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-tooltip.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-popover.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-button.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-collapse.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-carousel.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-typeahead.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-affix.js"></script>
    <script src="${pageContext.request.contextPath}/resources/assets/js/jquery.lightbox-0.5.js"></script>
	<script src="${pageContext.request.contextPath}/resources/assets/js/bootsshoptgl.js"></script>
	<script type="text/javascript">
	function order(){
		var f = document.f;
		
		if(f.r_name.value == ""){
			alert('이름을 입력하세요');
			return;
		}
		if(f.r_mail.value == ""){
			alert('email을 입력하세요');
			return;
		}
		if(f.r_tel1.value == "" || f.r_tel2.value == "" || f.r_tel3.value == ""){
			alert('전화번호를 제대로 입력하세요');
			return;
		}
		if(f.zipcode1.value == "" || f.zipcode2.value == ""){
			alert('우편번호를 입력하세요');
			return;
		}
		if(f.addr1.value == ""){
			alert('기본 주소를 입력하세요');
			return;
		}
		if(f.r_addr2.value == ""){
			alert('상세 주소를 입력하세요');
			return;
		}
		
		f.action = "order_complete";
		f.submit();
	}
	
	function copyLocation(){
		var f = document.f;
		
		if(f.sameChk.checked == true){
			f.r_name.value = f.o_name.value;
			f.r_mail.value = f.o_mail.value;
			f.r_tel1.value = f.o_tel.value.split("-")[0];
			f.r_tel2.value = f.o_tel.value.split("-")[1];
			f.r_tel3.value = f.o_tel.value.split("-")[2];
			f.zipcode1.value = f.o_zip.value.split("-")[0];
			f.zipcode2.value = f.o_zip.value.split("-")[1];
			f.addr1.value = f.o_addr1.value;
			f.r_addr2.value = f.o_addr2.value;
		}
	}
	
	function zipCodeOpen(){
		window.open('../zipcode/zipcodeform','newwindow','width = 500, height = 300, top=10, left=10, toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no');		
	}
	</script>
</body>
</html>